import 'package:flutter/material.dart';
import 'package:imitating_tiktok/pages/home_pages/mocks/widget_model.dart';
import 'package:imitating_tiktok/pages/home_pages/models/video_model.dart';
import 'package:imitating_tiktok/pages/home_pages/widgets/home_bottom_bar.dart';
import 'package:imitating_tiktok/pages/home_pages/widgets/home_right_bar.dart';
import 'package:imitating_tiktok/pages/home_pages/widgets/home_video_detail.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _snapSelectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.transparent,
      ),
      body: PageView.builder(
          scrollDirection: Axis.vertical,
          onPageChanged: (index) {
            setState(() {
              _snapSelectedIndex = index;
            });
          },
          itemCount: videos.length,
          itemBuilder: (context, index) {
            Video videoModel = videos[index];

            return Stack(
              alignment: Alignment.bottomCenter,
              children: [
                // 布局背景
                HomeVideoDetail(
                  video: videoModel,
                  snapPlayIndex: _snapSelectedIndex,
                  currentPlayIndex: index,
                ),
                // 布局底部与右部
                Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Expanded(
                      flex: 4,
                      child: Container(
                        height: MediaQuery.of(context).size.height / 4.0,
                        // color: Colors.orangeAccent,
                        child: HomeBottomBar(
                          video: videoModel,
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: Container(
                        height: MediaQuery.of(context).size.height / 2.5,
                        // color: Colors.purpleAccent,
                        child: HomeRightBar(
                          video: videoModel,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            );
          }),
    );
  }
}
